<template>
    <!-- 轮播图开始 -->
    <div class="swiper">
        <swiper class="swiper-box" data-swiper-autoplay="2000" :options="swiperOption" ref="mySwiper">
            <!-- 轮播的图片 -->
            <swiper-slide class="swiper-ietm" v-for="(item,index) in swiperbannerData" :key="index">
            <img :src="item.image" >
            </swiper-slide>
<!--
            <div class="swiper-button-prev"
             slot="button-prev"></div>
            <div class="swiper-button-next"
             slot="button-next"></div> -->
            <!-- 小圆点分页器 -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
    <!-- 轮播图结束 -->
</template>

<script>
    export default {
       name:'swiperBanner',
       props: ['swiperbannerData'],
        data() {
            return {
                swiperOption:{
                    loop: true, // 设置图片循环
                    autoplay : {
                         delay:5000
                    },
                    speed:1000,
                    pagination: {
                       el: ".swiper-pagination",//分页器的类名
                       clickable: true //设置分页小圆点可手动点击
                    },
                    //  navigation: {
                    //           nextEl: '.swiper-button-next',
                    //           prevEl: '.swiper-button-prev',
                    // }

                }
            }
        },
        created() {
          console.log(this.swiperbannerData)
        }
    }
</script>

<style scoped>
/* swiper轮播图样式设置开始 */
/* 修改分页小圆点的默认样式 */
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 3px;
}
.swiper >>> .swiper-pagination-bullet-active {
    background-color: #008EB7 !important;
}
.swiper >>> .swiper-pagination-bullet{
  background-color: #666666;
  opacity: 1;

}
.swiper {
    max-width: 1920px;
    overflow: hidden;
    min-width: 980px;
    margin:  0 auto;
}
.swiper-box{
  overflow: hidden;
}
.swiper-ietm{
  height: 454px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  background-color: #000000;
}
.swiper img {
    width:100%;
    height: auto;
    min-width: 1820px;
}
/* swiper轮播图样式设置结束 */
</style>
